$(function () {
    var imgBox = $('.img')
    var mask = $('.mask')
    var big = $('.big')

    imgBox.on({
        mouseover: function (e) {
            mask.css({ 'display': 'block' })
            big.css({ 'display': 'block' })

        },
        mouseout: function (e) {
            mask.css({ 'display': 'none' })
            big.css({ 'display': 'none' })
        },
        mousemove: function (e) {

            // 鼠标在盒子中的位置
            var x = e.pageX - imgBox.offset().left
            var y = e.pageY - imgBox.offset().top

            // 遮挡层的坐标
            var maskX = x - mask.width() / 2
            var maskY = y - mask.height() / 2

            // 遮挡层最大移动距离
            var maxX = imgBox.width() - mask.width()
            var maxY = imgBox.height() - mask.height()

            if (maskX <= 0) {
                maskX = 0
            } else if (maskX > maxX) {
                maskX = maxX
            }
            if (maskY <= 0) {
                maskY = 0
            } else if (maskY > maxY) {
                maskY = maxY
            }
            mask.css({
                'left': maskX,
                'top': maskY
            })

            // 大图片的最大移动距离
            var bigImg = big.children('img')
            var bigMaxX = bigImg.width() - big.width()
            var bigMaxY = bigImg.height() - big.height()

            // 大图片移动距离   
            // mask最小移动距离 / mask最大移动距离 = big最小移动距离 / big最大移动距离
            var bigX = maskX * bigMaxX / maxX
            var bigY = maskY * bigMaxY / maxY

            // 相反方向移动需要  负号
            bigImg.css({
                'left': -bigX,
                'top': - bigY
            })

        }

    }) // imgBox.on

})